<script setup lang="ts">
import axios from 'axios';
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import dayjs, { Dayjs } from 'dayjs';

const dateFormat = 'YYYY/MM/DD';

const value1 = ref<Dayjs>(dayjs('2024/11/01', dateFormat));

const router = useRouter();
// 日期匹配的房屋
const HouseList = ref([])
const panelChange = async (v: Dayjs | null, mode: string | null) => {
    await axios.get("http://localhost:3000/yg/getHomeDate", { params: { data: value1.value.format(dateFormat) } }).then(res => {
        if (res.data.code === 200) {
            HouseList.value = res.data.data
        } else {
            HouseList.value = []
        }
    })


}
</script>
<template>
    <div id="Content">
        <div class="top">
            <div class="left" @click="router.go(-1)"><van-icon name="arrow-left" size="20px" />返回</div>
            <h3 style="margin-left: 120px">浏览记录</h3>
        </div>
        <div class="main">
            <div class="main-content">
                <p>进行日期选择</p>
                <a-space direction="vertical" :size="24">
                    <a-date-picker v-model:value="value1" :format="dateFormat" @change="panelChange" />
                </a-space>
            </div>
            <div class="main-con" v-if="HouseList.length>0">
                <div v-for="item in HouseList" :key="item._id" class="main-con-item">
                    <div class="top">
                        <img :src="item.img[0]" alt="" class="im">
                    </div>
                    <p>{{ item.name }}</p>
                    <p style="color: #ff9900;font-size: 18px">￥{{ item.price }}</p>
                </div>
            </div>
            <div v-else>
                暂无浏览记录
            </div>
        </div>
    </div>
</template>



<style scoped lang="scss">
* {
    padding: 0;
    margin: 0;
}

#Content {
    width: 100%;
    height: 100%;

    .top {
        width: 100%;
        height: 50px;
        background-color: #fff;
        display: flex;
        align-items: center;

        .left {
            padding-left: 10px;
        }
    }

    .main {
        width: 100%;
        height: 800px;
        background-color: #f5f5f5;
        overflow: hidden;

        .main-content {
            width: 100%;
            height: 50px;
            display: flex;
            align-items: center;
            background-color: #fff;
        }

        .main-con {
            width: 100%;
            margin: 10px;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            text-align: center;
            .main-con-item {
                width: 120px;
                height: 120px;
                margin-top: 10px;
                .top {
                    width: 100%;
                    height: 80px;
                    .im {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
    }
}
</style>
